<template>
    
        <header class="product-header">
            <span @click="back"></span>
            <ul>  
                <router-link tag="li" to="" active-class="active">
                    <p>商品</p>
                </router-link>
                <router-link tag="li"  to="" active-class="active">
                    <p>评价</p>
                </router-link>
                <router-link tag="li"  to="" active-class="active">
                    <p>推荐</p>
                </router-link>
                <router-link tag="li"  to="" active-class="active">
                    <p>详情</p>
                </router-link>
            </ul>
            <router-link tag="a"  to="/mainpage" >
            </router-link>
           
        </header>

</template>
<script>
export default {
    methods: {
        back(){
            this.$router.back()
        }
    }
}
</script>

<style lang="stylus" scoped>
    .product-header
        position sticky 
        top 0
        height .46rem
        border-bottom 1px solid #dddddd
        background #fff
        >span
            position absolute
            left 0
            top 0
            height .45rem
            width .45rem
            background url(//w.kl.126.net/goods/dist/m/img/producticon.b67ad86.png) no-repeat 0 0.08rem
            background-size 2rem
        >a
            position absolute
            right 0
            top 0
            height .45rem
            width .45rem
            background: url(//w.kl.126.net/goods/dist/m/img/producticon.b67ad86.png) no-repeat -0.28rem 0.08rem
            background-size 2rem
        ul
            margin 0 .5rem
            height 100%
            display flex
            // justify-content center
            // align-items center
            li
                width 25%
                height 100%
                color #333
                font-size .14rem
                // text-align center
                // line-height .46rem
                display flex
                justify-content center
                align-items center

                p
                    width .28rem
                    height .20rem
                &.active
                    P
                        // border-bottom 1px solid #e31436
</style>